<template>
  <Container
    padding-left="4.1667vw"
    padding-right="4.1667vw"
    v-if="memberStore.profile"
  >
    <ProfileUserInfo></ProfileUserInfo>
    <main>
      <aside class="no-scrollbar" :style="bindAsidePaddingBottom">
        <div class="nav" v-for="(item, index) in routesList" :key="item.name">
          <div
            class="nav-title"
            @click="toggleRoute(item, index)"
            :class="item.active ? 'active' : ''"
          >
            {{ item.name }}
          </div>
          <div
            class="nav-item no-scrollbar"
            :style="{ width: `calc(100% - ${childMobileNavWidth}px)` }"
          >
            <div
              class="nav-item-title"
              :class="bindRouteActiveClass(item2.path)"
              v-for="(item2, index2) in item.routes"
              :key="item2.name"
              @click.stop="onClickNavItemRoute(item2.path, index2)"
            >
              {{ item2.name }}
            </div>
          </div>
        </div>
      </aside>
      <section style="min-width: 1px">
        <NuxtPage />
      </section>
    </main>
  </Container>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  nextTick,
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  provide,
  ref,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMemberStore } from "../../store";
const memberStore = useMemberStore();

const childMobileNavWidth = ref(0);
provide("childMobileNavWidth", childMobileNavWidth);
const clearMobileNavWidth = () => {
  if (isMobile()) {
    childMobileNavWidth.value = 0;
  }
};

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const { locale } = useI18n();

const route = useRoute();
const router = useRouter();
const routesList = ref([
  {
    name: "职业培训",
    routes: [
      {
        name: "我的报名",
        path: "/profile/apply",
      },
      {
        name: "我的考试",
        path: "/profile/exam",
      },
      {
        name: "我的成绩",
        path: "/profile/grade",
      },
    ],
    active: true,
  },
  {
    name: "人力资源",
    routes: [
      {
        name: "我的简历",
        path: "/profile/resume",
      },
      // {
      //   name: "我的求职",
      //   path: "/profile/job",
      // },
    ],
  },
  {
    name: "任务管理",
    routes: [
      {
        name: "我的任务",
        path: "/profile/task",
      },
      {
        name: "任务分配",
        path: "/profile/to_order",
      },
    ],
    path: "/profile/task",
  },
  {
    name: "航空日志",
    path: "/profile/journal",
  },
]);

const setNavPath = () => {
  setTimeout(() => {
    // 职业培训
    routesList.value[0].name = $t("content.profile.navList.route_1.label");
    routesList.value[0].routes![0].name = $t(
      "content.profile.navList.route_1.child_routes.label_1"
    );
    routesList.value[0].routes![1].name = $t(
      "content.profile.navList.route_1.child_routes.label_2"
    );
    routesList.value[0].routes![2].name = $t(
      "content.profile.navList.route_1.child_routes.label_3"
    );
    // 人力资源
    routesList.value[1].name = $t("content.profile.navList.route_2.label");
    routesList.value[1].routes![0].name = $t(
      "content.profile.navList.route_2.child_routes.label_1"
    );
    // routesList.value[1].routes![1].name = $t(
    //   "content.profile.navList.route_2.child_routes.label_2"
    // );
    // 我的任务
    routesList.value[2].name = $t("content.profile.navList.route_3.label");
    routesList.value[2].routes![0].name = $t(
      "content.profile.navList.route_3.child_routes.label_1"
    );
    routesList.value[2].routes![1].name = $t(
      "content.profile.navList.route_3.child_routes.label_2"
    );
    // 航空日志
    routesList.value[3].name = $t("content.profile.navList.route_4.label");
  });
};

const navActive = ref({
  a_route_index: 0,
  b_route_index: 0,
});

const setSessionIndex = () => {
  sessionStorage.setItem("navActive", JSON.stringify(navActive.value));
};
const toggleRoute = (route: (typeof routesList.value)[0], index: number) => {
  routesList.value.forEach((item: (typeof routesList.value)[0]) => {
    item.active = false;
  });
  goto(route.routes ? route.routes[0].path : route.path);
  route.active = true;
  navActive.value.a_route_index = index;
  setSessionIndex();
  clearMobileNavWidth();
};
const onClickNavItemRoute = (path: string, index: number) => {
  goto(path);
  navActive.value.b_route_index = index;
  setSessionIndex();
  clearMobileNavWidth();
};
const bindRouteActiveClass = computed(() => {
  return (path: string) => (route.path.includes(path) ? "active" : "");
});

let noPaddingRoutes = ["/profile/journal"];
const bindAsidePaddingBottom = computed(() => {
  if (noPaddingRoutes.includes(route.path)) {
    return { paddingBottom: "0px" };
  } else {
    return {};
  }
});
onBeforeMount(() => {
  setNavPath();
});

onMounted(() => {
  const navActiveData = sessionStorage.getItem("navActive");
  if (navActiveData) {
    navActive.value = JSON.parse(navActiveData);
    let rootRoutes = routesList.value[navActive.value.a_route_index];
    toggleRoute(rootRoutes, navActive.value.a_route_index);
    rootRoutes.routes
      ? onClickNavItemRoute(
          rootRoutes.routes[navActive.value.b_route_index]?.path,
          navActive.value.b_route_index
        )
      : null;
  }
});

</script>
<style scoped lang="less">
main {
  display: flex;
  gap: 64px;
}
aside {
  .nav-title,
  .nav-item-title {
    padding: 8px 16px;
    cursor: pointer;
  }
  .nav-title {
    font-size: 18px;
    &.active {
      background-color: #f5f8fa;
      border-radius: 6px;
      color: #3d88f2;
      & + .nav-item {
        height: auto;
        opacity: 1;
        overflow-x: scroll;
        visibility: visible;
      }
    }
  }
  .nav-item {
    opacity: 0;
    height: 0;
    visibility: hidden;
  }
  .nav-item-title {
    padding-left: 24px;
    font-size: 16px;
    color: #36434d;
    &.active {
      color: #3d88f2;
    }
  }
}
section {
  flex: 1;
}

@media screen and (max-width: 768px) {
  main {
    flex-direction: column;
    position: relative;
    gap: 123px;
  }
  aside {
    display: flex;
    padding-bottom: 170px;
    overflow-x: scroll;
    overflow-y: hidden;

    .nav-item {
      position: absolute;
      left: 0;
      display: flex;
      z-index: 9;
    }
    .nav-title,
    .nav-item-title {
      padding: 41px 62px;
      font-size: 79px;
      white-space: nowrap;
    }
    .nav-title {
      &.active {
        border-radius: 31px;
      }
    }
  }
}
</style>
